<template>
    <div class="month-project-line">
        <echarts :data="optionData" height="300px"></echarts>
    </div>
</template>

<script>
import Echarts from "@components/my-components/echarts.vue";

export default {
    mixins: [],
    components: {
        Echarts,
    },
    props: {
        options: {
            type: Array,
            default: () => [],
        },
    },
    data() {
        return {};
    },
    computed: {
        test(val){
            return val+10000000
        },

        optionData() {
            const colors = ["#3b68ff","#2ec75a","#ff8f00","#ff5454"]
            return {
                title:{
                    show:true,
                    text:'注：少数缺失的中标金额，用项目预算补充。',
                    left: '10%',
                    top: '85%',
                    textStyle: {
                        color: "#909399",
                        fontSize: 13,
                    },
                },
                tooltip: {
                    trigger: "axis",
                    formatter:  params => {
                        let str = "";
                        params.forEach((item) => {
                            str +=
                                '<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color:' +
                                item.color +
                                '"> </span>' +
                                ' ' +
                                item.seriesName + '年'+
                                params[0].axisValue +
                                " : " + 
                                item.value +
                                " 万元 "  +
                                "<br />";
                        });
                        return str;
                    },
                },
                legend: {
                    data: this.options.map((item) => (
                        item.year
                    )),  
                },
                grid: {
                    left: "3%",
                    right: "4%",
                    bottom: "18%",
                    containLabel: true,
                },
                toolbox: {
                    
                },
                xAxis: {
                    type: "category",
                    boundaryGap: true,
                    data: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],
                    
                },
                yAxis: {
                    type: "value",
                    name: '项目金额(万元)',
                    axisLine: {
                        show: false,
                        lineStyle: {
                            color: colors[0],
                        },
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: 'dotted',
                        }
                    },
                    axisTick:{
                        show:false // 不显示坐标轴刻度线
                    },
                },
                series: this.options.map((item,index) => (
                    {
                        name: item.year,
                        type: "line",
                        data: item.infos.map((i) => Math.floor(i.total) / 10000 ),
                        itemStyle:{
                            normal:{
                                color:colors[index]
                            }
                        }
                    }
                )),
            };
        },
    },
    watch: {},
    methods: {
        int() {},

    },
    mounted() {
        this.int();
    },
};
</script>

<style lang="scss" scoped>
@import "@css/var.scss";
.month-project-line {
}
</style>